google.load('visualization', '1.1', {packages: ['corechart', 'controls']});

function drawVisualization() {
  var dashboard = new google.visualization.Dashboard(
       document.getElementById('dashboard'));

   var control = new google.visualization.ControlWrapper({
     'controlType': 'ChartRangeFilter',
     'containerId': 'control',
     'options': {
       'filterColumnIndex': 0,
       'ui': {
	 'chartType': 'LineChart',
	 'chartOptions': {
	   'chartArea': {'width': '90%'},
	   'hAxis': {'baselineColor': 'none'}
	 },
	 'chartView': {
	   'columns': [0, 3]
	 },
       }
     },
   });

   var chart = new google.visualization.ChartWrapper({
     'chartType': 'CandlestickChart',
     'containerId': 'chart',
     'options': {
       'chartArea': {'height': '80%', 'width': '90%'},
       //'hAxis': {'slantedText': false},
       'legend': {'position': 'none'}
     },
     'view': {
       'columns': [
	 {
	   'calc': function(dataTable, rowIndex) {
	     return '' + dataTable.getValue(rowIndex, 0);
	   },
	   'type': 'string'
	   },
	   1, 2, 3, 4, 5]
     }
   });

   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Timestamp');
   data.addColumn('number', 'Start');
   data.addColumn('number', 'Start');
   data.addColumn('number', 'End');
   data.addColumn('number', 'End');
   data.addColumn({type: 'string', role: 'tooltip'});

   for (var i = 0; i < log.length; ++i) {
     var start = log[i]['start'];
     var end = log[i]['end'];
     data.addRow([start, start, start, end, end, log[i]['event'] + ': ' + log[i]['command'] + ' (' + (end - start) + ')']);
   }

   dashboard.bind(control, chart);
   dashboard.draw(data);
}

google.setOnLoadCallback(drawVisualization);
